<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style type="text/css">
        canvas {
            display: block;
            margin: 50px auto;
            box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
        }
         #btn-wrap {
            margin:10px 10px;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
    </style>



</head>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
<body>

<canvas id="mycanvas" width="450px" height="450px"></canvas>
<div id="btn-wrap">
        <button id="audio">语音识别</button>
</div>
<div style="text-align: center;">
    语音识别格式为“X行X列”，其中0≤X≤14
</div>
<script type="text/javascript">
    var chess = document.getElementById("mycanvas");
    var audioBtn = document.getElementById("audio")
    var context = chess.getContext('2d');
    var me = true;
    var flag = false;
    var chessBox = [];//用于存放棋盘中落子的情况
    for (var i = 0; i < 15; i++) {
        chessBox[i] = [];
        for (var j = 0; j < 15; j++) {
            chessBox[i][j] = 0;//初始值为0
        }
    }

    function drawChessBoard() {
        for (var i = 0; i < 15; i++) {
            context.strokeStyle = "#D6D1D1";
            context.moveTo(15 + i * 30, 15);//垂直方向画15根线，相距30px;
            context.lineTo(15 + i * 30, 435);
            context.stroke();
            context.moveTo(15, 15 + i * 30);//水平方向画15根线，相距30px;棋盘为14*14；
            context.lineTo(435, 15 + i * 30);
            context.stroke();
        }
    }

    //绘制棋盘
    drawChessBoard();
    function oneStep(i, j, k) {
        context.beginPath();
        //绘制棋子
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
        var g = context.createRadialGradient(15 + i * 30, 15 + j * 30, 13, 15 + i * 30, 15 + j * 30, 0);
        if (k) {    //k=true是黑棋，否则是白棋
            g.addColorStop(0, '#0A0A0A');//黑棋
            g.addColorStop(1, '#636766');
        } else {
            g.addColorStop(0, '#D1D1D1');//白棋
            g.addColorStop(1, '#F9F9F9');
        }
        context.fillStyle = g;
        context.fill();
        context.closePath();
    }

     //语音识别
        audioBtn.onclick = function () {
            $.ajax({
                type: 'POST',
                url: '/audio',
                data: {},
                success: function (data) {
                    console.log(data)
                    if(data.msg === false){
                        alert("没听清哦！请再试一次！")
                    }
                    else{
                        oneStep(data.y, data.x,me)
                        me = !me;
                    }
                }

            })
        }


    chess.onclick = function (e) {
        var x = e.offsetX;
        var y = e.offsetY;
        var i = Math.floor(x / 30);
        var j = Math.floor(y / 30);
        if (chessBox[i][j] == 0) {
            oneStep(i, j, me);
            if (me) {
                chessBox[i][j] = 1;
            } else {
                chessBox[i][j] = 2;
            }
            me = !me;//下一步白棋
        }
        console.log(chessBox[i][j])
        $.ajax({
            url: "http://127.0.0.1:5000/judge",
            type: "post",
            data: {
                data: JSON.stringify({
                    'i': i,
                    'j': j,
                    'checkBox': chessBox,
                    'me': me
                })
            },
            dataType: "json",
            success: function (data) {
                console.log(data)
                alert(data.status)
                chess.height = chess.height
                drawChessBoard();//绘制棋盘
                for (var i = 0; i < 15; i++) {
                    chessBox[i] = [];
                    for (var j = 0; j < 15; j++) {
                        chessBox[i][j] = 0;//初始值为0
                    }
                }
                console.log(chessBox)
            }
        })

    }
</script>
</body>
</html>